<template>
  <div class="classic">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(page,index) of pages" :key="index">
        <div @click="toClassic(item.id)" class="classic-item" v-for="item of page" :key="item.id">
          <img :src="item.imgUrl" :alt="item.title">
          <p>{{ item.title }}</p>
        </div>
      </swiper-slide>
      <!--分页器-->
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
   <!-- <ul class="classic-list">

    </ul>-->
  </div>
</template>

<script>
export default {
  props: ['classicList'],
  data () {
    return {
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        },
        loop: true
      }
    }
  },
  // 计算属性（可以缓存）
  computed: {
    pages () {
      let page = []
      this.classicList.map((v, i) => {
        let idx = Math.floor(i / 8)
        // 将一维数组拆成二维数组
        if (!page[idx]) page[idx] = []
        page[idx].push(v)
      })
      // console.log(page)
      return page
    }
  },
  methods: {
    toClassic (id) {
      this.classicList.map(item => {
        if (item.id === id) {
          // this.$router.push({path: '/classic?data=' + JSON.stringify(item)})
          this.$router.push({name: 'Classic', query: {data: JSON.stringify(item)}})
        }
      })
    }
  }
}
</script>

<style scoped lang="stylus">
@import "~css/common.styl"
.classic
  overflow: hidden
  background-color: #fff
  .classic-item
    width: 25%
    height: 0
    padding-bottom: 25%
    float: left
    img
      width: 1.1rem
      height: 1.1rem
      display: block
      margin: 0 auto
      padding-top: .2rem
    p
      font-size: .28rem
      text-align: center
      color: #212121
      padding-top: .1rem
  >>>.swiper-container
    padding-bottom: .2rem
  >>>.swiper-pagination-bullet-active  /* 样式穿透 */
    opacity: 1
    background: #fff
  >>>.swiper-pagination-bullet
    width: 6px
    height: 6px
  >>>.swiper-pagination-bullets
    bottom: 0px
  >>>.swiper-pagination-bullet-active
    opacity: 1
    background: $bgColor
</style>
